<template>
	<!-- 每条消息(申请)的详情 -->
	<view class="details">
		<!-- 导航栏渐变色 -->
		<u-navbar :is-back="true" :border-bottom="flase" title="审批详情" title-color="#fff" :title-size="40"
			backIconColor="#fff"></u-navbar>
		<view class="content">
			<view class="content_box">
				<view class='list'>
					<view class='phone'>
						<text>标题:</text>
						<u-input v-model="detail.title" :clearable="false" type="text" :border="false"
							:disabled="inputDisabled" />
					</view>
					<view class='phone'>
						<text>提交人员:</text>
						<view>{{detail.user_name}}</view>
					</view>
					<view class='phone'>
						<text>提交时间:</text>
						<view>{{detail.created_at}}</view>
					</view>
					<view class='phone' v-if="appid==4||appid==5||appid==13">
						<text>金额:</text>
						<u-input v-model="detail.money" :clearable="false" type="text" :border="false"
							:disabled="inputDisabled" />
					</view>
					<view class='phone'>
						<text>描述:</text>
						<u-input v-model="detail.desc" :clearable="false" type="text" :border="false"
							:disabled="inputDisabled" />
					</view>
					<view class='fileImg_list'>
						<view>图片</view>
						<view class="img_list">
							<view v-if="imgPath.length!=0">
								<image v-for="(item,index) in imgPath" :key="index" :src="item" @click="previewImage">
								</image>
							</view>
							<view v-else class="nothing_file">没有上传图片！</view>
						</view>
					</view>
					<view class='fileImg_list'>
						<view>文件</view>
						<view>
							<view v-if="filePath.length!=0" class="file_list">
								<view v-for="(item,index) in filePathName" :key="index" @click="fileDownload(item)">
									{{item}}
								</view>
							</view>
							<view v-else class="nothing_file">没有上传图片！</view>
						</view>
					</view>
				</view>
				<!-- 审批人员循环 -->
				<view class="status" v-for="(item,index) in appPerson" :key="index">
					<view class="flex">
						<view class="img">
							<image src="../../static/img/349511562104384641.png" mode="widthFix" v-if="item.status==1">
							</image>
							<image src="../../static/img/349511562104384641.png" mode="widthFix" v-if="item.status==3">
							</image>
							<image src="../../static/img/780252898117655437.png" mode="widthFix"
								v-else-if="item.status==-1">
							</image>
							<image src="../../static/img/blue.png" mode="widthFix" v-else-if="item.status==0">
							</image>
							<!-- <image src="../../static/img/7db339a9e92f8f1df34a57ca53eaeca.png" mode="widthFix"
								v-else-if="item.status==2"></image> -->
						</view>
						<view class="bus">[ 审批人员 ]：{{item.re_name}}</view>
					</view>
					<view class="buss">
						<view>[ 审批状态 ] ：<text v-if="item.status==1">已通过</text>
							<text v-else-if="item.status==-1">已驳回</text>
							<text v-else-if='item.status==0'>待审批</text>
							<text v-else-if='item.status==3'>已完成</text>
							<!-- <text v-else-if='item.status==2'>审核中</text> -->
						</view>
						<text>[ 审批时间 ]：{{item.send_time}}</text>
						<view v-if="item.reason">[ 驳回理由 ]：{{item.reason}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-button type="primary" shape="circle" size="medium" plain v-if="!inputDisabled" @click="secondSub">提交修改
		</u-button> -->
		<!-- <u-button type="primary" shape="circle" size="medium" plain v-if="!inputDisabled" @click="secondSub">提交修改
		</u-button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appid: '', //控制金额显示
				// data: [],
				// re_name: "",
				detail: "",
				imgPath: [], //detail中申请人上传的图片 - accessUrl:预览地址，downLoadUrl:下载地址
				filePath: [], //detail中申请人上传的文件
				filePathName: [], // detail中申请人上传的文件 - 文件名字
				appPerson: "",
				inputDisabled: true //输入框是否禁用
			}
		},
		methods: {
			secondSub() { //修改后提交按钮
				uni.showToast({
					title: "未审批可修改",
					icon: "none"
				})
			},
			previewImage() { //预览图片
				uni.previewImage({
					urls: this.imgPath,
				})
			},
			fileDownload(item) { //下载文件 - item为文件的名称
				let str1 = ""
				this.filePath.forEach(item2 => {
					let a = item2.split('/')
					if (item == a[3]) {
						str1 = item2
					}
				})
				uni.showLoading({
					title: "下载中！"
				})
				uni.downloadFile({
					url: str1,
					success: (res) => {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (res) => {
								uni.hideLoading()
								uni.openDocument({
									filePath: res.savedFilePath,
									// fileType: "docx",
									success: (res) => {
										console.log(res, '打开成功');
									},
									fail: (err) => {
										console.log(err, '打开失败');
									}
								});
							},
							fail(err) {
								console.log(err, 'saveFile err');
							}
						});
					},
					fail(err) {
						console.log(err, 'downloadFile err');
					}
				});
			},
		},
		onLoad(e) {
			this.appid = e.appid
			uni.showLoading({
				title: '正在加载...'
			})
			//接口获取数据 - /busApply/detail
			this.$http(this.$api.businessXq, {
				apply_id: e.id,
			}).then(res => {
				this.appPerson = res.data.appPerson
				this.detail = res.data.detail
				if (res.data.detail.desc.includes('<')) {
					let a = res.data.detail.desc.split('<p>')
					let b = a[1].split('</p>')
					this.detail.desc = b[0]
				}

				this.imgPath = res.data.detail.img_path
				this.filePath = res.data.detail.file_path
				this.filePath.forEach(item => {
					let a = item.split('/')
					this.filePathName.push(a[3])
				})

				// 判断输入框是否禁用(修改申请)
				if (res.data.detail.status == 0) {
					this.inputDisabled = false
				} else {
					this.inputDisabled = true
				}
				uni.hideLoading()
				uni.showToast({
					title: "刷新成功",
					icon: 'none',
					duration: 800
				})
			})
		},
	}
</script>

<style scoped lang="scss">
	.file_list {
		line-height: 50rpx;
		color: #ccc;
		font-size: 25rpx;
		padding-left: 30rpx;
	}

	.nothing_file {
		padding-left: 40rpx;
		font-size: 25rpx;
	}

	u-button {
		display: block;
		text-align: center;
		margin-top: 50rpx;
	}

	* {
		padding: 0;
		margin: 0;
	}

	.content {
		padding: 10px;
		font-size: 14px;
	}

	.content_box {
		box-shadow: 0px 0px 6px #DCDCDC;
		border-radius: 5px;
		padding: 10px;
		margin-top: 25rpx;
	}

	.list {
		font-size: 32rpx;
	}

	.phone {
		background: #fff;
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		align-items: center;
		height: 90rpx;
	}

	.phone>text {
		display: inline-block;
		width: 25%;
	}

	.fileImg_list {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.fileImg_list>view:first-child {
		margin-bottom: 20rpx;
	}

	.img_list>view {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	.img_list>view>image {
		display: block;
		width: 32%;
		height: 205rpx;
		object-fit: cover;
		margin: 0 1% 10rpx 0;
	}


	u-input {
		width: 75%;
	}

	.status {
		line-height: 30px;
		padding-top: 20px;
	}

	.img {
		width: 50rpx;
		height: 50rpx;
	}

	.img image {
		width: 50rpx;
		height: 50rpx;
		display: inline;
	}

	.bus {
		font-size: 32rpx;
		padding-left: 15rpx;
	}

	.buss {
		color: #ccc;
		font-size: 14px;
		margin-left: 25rpx;
		padding-left: 40rpx;
		border-left: 1px solid #DCDCDC;
	}

	.flex {
		display: flex;
	}
</style>
